<template>
	<view class="statistics-wrap">
		<view class="statistics-top">
			<view class="as-charts flex-column flex-c-stretch">
				<view class=" flex-row flex-m-end flex-c-center">
					<text class="h2 p"></text>
					<!-- <picker  mode="date" fields="month" :value="dateValue" @change="changePicker">
						<view class="border-picker flex-row flex-c-center"  >
							<text class="h4-g">{{dateValue||'月份'}}</text>
							<image class="img-40 u-p-10" src="../../static/img/v.png" mode="aspectFit" ></image>
						</view>
					</picker> -->
					<picker :range="ym" :value="timeType" @change="changeYMType">
						<view class="border-picker flex-row flex-c-center">
							<text class="h4-g u-m-r-50">{{ ym[timeType] }}</text>
							<image class="img-40 u-p-10" src="../../static/img/v.png" mode="aspectFit"></image>
						</view>
					</picker>
					<!-- <picker class="u-m-l-20"  mode="date" :fields="timeType==0?'year':'month'" :value="dateValue" @change="changePicker">
						<image class="img-40" src="~@/static/img/date.png" mode="aspectFit" @tap="popupShow=true"></image>
							
					</picker> -->
					<image class="img-40" src="~@/static/img/date.png" mode="aspectFit" @tap="datePopupShow = true"></image>
				</view>
				<!-- <canvas canvas-id="canvasColumn" id="canvasColumn" class="charts"></canvas> -->
				<canvas v-if="num > 0" canvas-id="canvasColumn" id="canvasColumn" class="charts"></canvas>
				<text v-if="num === 0" class="chart-empty-tip ">暂无数据</text>
			</view>
		</view>
		<mescroll-uni :top="scrollTop" ref="mescrollRef" @up="loadList" @init="mescrollInit" @down="downCallback">
			<view class="as-list">
				<view class="flex-row flex-m-between">
					<text class="h2 p">顾客购买量</text>
					<text></text>
					<!-- <picker  mode="date" :fields="timeType===0?'year':'month'" :value="dateValue" @change="changePicker">
						<image class="img-40" src="~@/static/img/date.png" mode="aspectFit" @tap="popupShow=true"></image>
					</picker> -->
				</view>
				<view class="flex-row flex-m-between">
					<text class=" cell h5-g flex20">店铺销售金额</text>
					<text class=" cell h5-g flex20">店铺顾客数量</text>
					<text class=" cell h5-g flex20">客单价</text>
					<text class=" cell h5-g flex20">订单笔数</text>
					<text class=" cell h5-g flex20">单笔订单金额</text>
				</view>
				<view v-for="(item, index) in dataList" :key="index" class="flex-row flex-m-between flex-c-center neumorphism info-row">
					<text class=" flex20 h3 flex-m-between white-wrap">{{ formatRMB(item.shopAmount) || '' }}</text>
					<text class=" flex20 h3">{{ item.shopMemberNum }}</text>
					<text class=" flex20 h3">{{ formatRMB(item.memberAmount) }}</text>
					<text class=" flex20 h3">{{ item.shopOrderNum }}</text>
					<text class=" flex20 h3">{{ formatRMB(item.orderAmount) }}</text>
				</view>
			</view>
		</mescroll-uni>
		<!-- 	<mx-date-picker :show="datePopupShow"  type="date" :value="dateValue" :show-tips="true"
			 @confirm="onSelected" @cancel="onSelected" /> -->
		<lvl-picker :popupShow="lvlPopupShow" @change="changeLvl" @search="doSearchByLvl" @colosePopup="lvlPopupShow = false"></lvl-picker>
		<tui-modal></tui-modal>
		<date-popup @determine="determine" :beginDate="beginDate" :endDate="endDate" :popupShow="datePopupShow" @colosePopup="datePopupShow = false"></date-popup>
	</view>
</template>

<script>
import uCharts from '@/packageC/static/u-charts/u-charts.js';
import subNavigation from '../../components/sub-navigation/sub-navigation.vue';
import lvlPicker from '../../components/lvl-picker/lvl-picker.vue';
// import MxDatePicker from "@/packageC/components/mx-datepicker/mx-datepicker.vue";
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import chartMixin from '../../common/chart-mixin/chart-mixin.js';
import datePopup from '../../components/char-date-picker/chart-date-picker.vue';

var canvaColumn = null;
export default {
	data() {
		return {
			num: 10,
			ym: ['年份', '月份'],
			timeType: 1, //0：年度（默认） 1：月份
			columnTitleList: ['顾客', '产品数', '订单数', '金额'],
			dataList: [],
			beginDate: null,
			endDate: null,
			popupShow: false,
			chartWidth: 220,
			chartHeight: 220,
			pixelRatio: 1,
			chartData: {
				Column: {
					series: [
						{
							name: '一班',
							data: 50
						},
						{
							name: '二班',
							data: 30
						},
						{
							name: '三班',
							data: 20
						},
						{
							name: '四班',
							data: 18
						},
						{
							name: '五班',
							data: 8
						}
					]
				}
			},

			scrollTop: '572'
		};
	},
	mixins: [chartMixin, MescrollMixin],
	components: {
		subNavigation,
		lvlPicker,
		// MxDatePicker,
		datePopup
	},
	onLoad() {
		let today = this.$util.getYearMonthDay(new Date());
		let lastWeek = this.$util.getYearMonthDay(new Date(new Date().getTime() - 30 * 24 * 60 * 60 * 1000)); // new Date(new Date().getTime() - 7*24 * 60 * 60 * 1000).Format('yyyy-MM-dd')
		this.beginDate = lastWeek;
		this.endDate = today;
		this.dateValue = [this.beginDate, this.endDate];
		// #ifdef H5
		this.$wechat.noShare();
		// #endif
		this.$nextTick(() => {
			uni.getSystemInfo({
				success: res => {
					console.log('getSystemInfo res', res, res.windowWidth, res.windowHeight);
					this.chartWidth = res.windowWidth;
					// this.chartHeight = res.windowHeight
					this.chartHeight =res.windowWidth*0.65
					this.loadChartData();
				}
			});
		});
	},
	methods: {
		changeYMType(e) {
			this.timeType = parseInt(e.target.value);
			if (this.timeType === 0) {
				let today = this.$util.getYearMonthDay(new Date());
				let yearBegin;
				if (today.split('-')[0] == 2021) {
					yearBegin = `${today.split('-')[0]}-01-01`;
				} else {
					yearBegin = this.$util.getYearMonthDay(new Date(new Date().getTime() - 365 * 24 * 60 * 60 * 1000));
				}
				this.beginDate = yearBegin;
				this.endDate = today;
				this.dateValue = [this.beginDate, this.endDate];
			} else {
				let today = this.$util.getYearMonthDay(new Date());
				let lastWeek = this.$util.getYearMonthDay(new Date(new Date().getTime() - 30 * 24 * 60 * 60 * 1000)); // new Date(new Date().getTime() - 7*24 * 60 * 60 * 1000).Format('yyyy-MM-dd')
				this.beginDate = lastWeek;
				this.endDate = today;
				this.dateValue = [this.beginDate, this.endDate];
			}

			this.mescroll.resetUpScroll();
			this.loadChartData();
		},
		loadList(page) {
			let orgLv = uni.getStorageSync('storeOrgLv');
			const params = {
				current: page.num,
				pageSize: page.size,
				timeType: this.timeType + 1, //1：年度（默认） 2：月份
				beginDate: this.beginDate, // 	开始时间
				endDate: this.endDate, // 结束时间
				orgLv: orgLv
			};

			this.$http.getCustomerChartList(params).then(res => {
				if (res.status === 0 && res.data) {
					let curPageData = res.data.records;
					this.mescroll.endSuccess(res.data.records.length);
					if (page.num == 1) {
						this.dataList = [];
					}
					this.dataList = this.dataList.concat(curPageData);
				} else {
					this.mescroll.endSuccess(0);
					this.mescroll.endErr();
					// uni.showToast({
					// 	icon: 'none',
					// 	title:res.message,
					// 	duration:2000
					// })
				}
			});
		},
		loadChartData() {
			let orgLv = uni.getStorageSync('storeOrgLv');
			const params = {
				timeType: this.timeType + 1, //1：年度（默认） 2：月份
				beginDate: this.beginDate, // 	开始时间
				endDate: this.endDate, // 结束时间
				orgLv: orgLv
			};
			this.$http.getCustomerChart(params).then(res => {
				this.num = 0;
				if (res.status == 0 && res.data) {
					let Column = {
						categories: [],
						series: []
					};
					this.chartData = res.data;
					// Column.categories=this.chartData.memberNum
					let memberList = this.chartData.memberNum || [];
					let amountList = this.chartData.amount || [];
					let xa
					let xa1;
					if(this.timeType==0){
						xa='\xa0\xa0\xa0\xa0'
						xa1='';
					}else{
						xa='\xa0\xa0'
						xa1='\xa0\xa0'
					}
					let list1 = `${amountList[0]}元以下${xa}`;
					let list2 = `${amountList[0]}-${amountList[1]}元${xa1}`;
					let list3 = `${amountList[1]}-${amountList[2]}元`;
					let list4 = `${amountList[2]}元以上`;
					let legendList = [list1, list2, list3, list4];
					if (memberList.length === amountList.length) {
						for (var i = 0; i < memberList.length; i++) {
							let member = memberList[i];
							let amount = legendList[i];
							Column.series.push({
								name: amount,
								data: parseInt(member)
							});
							if (member !== 0) {
								this.num = 1;
							}
						}
						console.log('memberList', memberList, 'amountList', amountList);
						this.showColumn('canvasColumn', Column);
					}
				}
			});
		},
		showColumn(canvasId, chartData) {
			// var num = chartData.series.length;
			// this.num = num
			canvaColumn = new uCharts({
				$this: this,
				canvasId: canvasId,
				type: 'ring',
				fontSize: 11,
				legend: true,
				title: {
					name: '',
					color: '#7cb5ec',
					fontSize: 25,
					offsetY: -20
				},
				subtitle: {
					// name: '消费档占比',
					color: '#666666',
					fontSize: 15,
					offsetY: 30
				},
				extra: {
					pie: {
						offsetAngle: -45,
						ringWidth: 40,
						labelWidth: 15
					}
				},
				legend: {
					lineHeight: 20,
					itemGap: this.chartWidth * 0.16,
				},
				background: '#FFFFFF',
				pixelRatio: 1,
				series: chartData.series,
				animation: true,
				width: this.chartWidth,
				height: this.chartHeight,
				disablePieStroke: true,
				dataLabel: true
			});
		},
		changePicker(e) {
			console.log('changePicker-e ', e);

			let currentMonth = e.target.value;
			this.beginDate = currentMonth;
			this.endDate = currentMonth;
			// let currentMonthDate = new Date(currentMonth)
			// this.beginDate = '2021-01-01'
			// this.endDate = '2021-05-01'
			this.loadChartData();
			this.mescroll.resetUpScroll();
		}
	}
};
</script>

<style lang="scss">
@import '../../common/statistics.scss';

.charts {
	// width: 90vw;
	// height:90vw*2/3;
	width: 100vw;
	// height:90vw*2/3;
	height: 100%;
	// background-color: #FFFFFF;
}

.as-charts {
	background-color: transparent;
}
</style>
